<template>
  <div>
    <h4 class="rad-txt" style="margin-top:-50px">
      <span class="abtxt1">地址</span>
      <span class="abtext">管理</span>
    </h4>
    <div class="container">
      <div class="row thumbnail center col-sm-12">
        <div style="width: 400px;margin-left: 50px;">
          <el-form
            :model="addressForm"
            :rules="rules"
            ref="addressForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="真实姓名" prop="receiverName">
              <el-input v-model="addressForm.receiverName"></el-input>
            </el-form-item>
            <el-form-item label="收货电话" prop="receiverPhone">
              <el-input v-model="addressForm.receiverPhone"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="addressInfo">
              <el-input v-model="addressForm.addressInfo"></el-input>
            </el-form-item>
            <el-form-item label="设为默认">
              <el-switch
                style="margin-left: -270px;"
                v-model="defaultAddress"
              ></el-switch>
            </el-form-item>
            <el-form-item>
              <el-button
                style="margin-left: -90px;"
                type="primary"
                size="mini"
                @click="submitForm('addressForm')"
                round
                >立即添加</el-button
              >
              <el-button size="mini" @click="resetForm('addressForm')"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <div ref="table">
          <el-table
            :data="page.list"
            border
            style="width: 1080px;margin-left: 50px;margin-top: 20px;"
            :stripe="true"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column prop="receiverName" label="真实姓名" width="180">
            </el-table-column>
            <el-table-column prop="receiverPhone" label="收货电话" width="180">
            </el-table-column>
            <el-table-column prop="addressInfo" label="收货地址" width="330">
            </el-table-column>
            <el-table-column label="地址状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.addressState == 0"
                  >普通地址<i
                    style="color:chocolate;"
                    class="el-icon-warning"
                  ></i
                ></span>
                <span v-if="scope.row.addressState == 1"
                  >默认地址<i
                    style="color:chocolate;"
                    class="el-icon-warning"
                  ></i
                ></span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click="handleClick(scope.row)"
                  size="mini"
                  icon="el-icon-edit"
                  round
                ></el-button>
                <el-button
                  v-if="scope.row.addressState == 0"
                  @click="changeState(scope.row)"
                  type="warning"
                  icon="el-icon-loading"
                  size="mini"
                  round
                  >设为默认</el-button
                >
                <el-button
                  v-if="scope.row.addressState == 0"
                  @click="delById(scope.row.addressId)"
                  type="danger"
                  icon="el-icon-delete-solid"
                  round
                  size="mini"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row style="margin-left: 50px;">
          <el-col :span="5">
            <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageNumChange"
              :current-page="page.current"
              :page-sizes="[1, 5, 10]"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </el-col>
        </el-row>
        <el-dialog :visible.sync="showUpdateWindow" width="30%">
          <template slot="title">
            <div style="font-size:18px;font-weight: 999;">修改收货地址</div>
          </template>
          <div style="width: 400px;">
            <el-form
              :model="updateAddressForm"
              :rules="rules"
              ref="updateAddressForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="真实姓名" prop="receiverName">
                <el-input v-model="updateAddressForm.receiverName"></el-input>
              </el-form-item>
              <el-form-item label="收货电话" prop="receiverPhone">
                <el-input v-model="updateAddressForm.receiverPhone"></el-input>
              </el-form-item>
              <el-form-item label="详细地址" prop="addressInfo">
                <el-input v-model="updateAddressForm.addressInfo"></el-input>
              </el-form-item>

              <el-button
                type="primary"
                @click="submitUpdateForm('updateAddressForm')"
                >立即修改</el-button
              >
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressForm: {
        receiverName: "",
        receiverPhone: "",
        addressInfo: ""
      },
      rules: {
        receiverName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          }
        ],
        receiverPhone: [
          {
            required: true,
            message: "请输入收货电话",
            trigger: "blur"
          }
        ],
        addressInfo: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur"
          }
        ]
      },
      page: {},
      defaultAddress: false,
      updateAddressForm: {
        receiverName: "",
        receiverPhone: "",
        addressInfo: ""
      },
      showUpdateWindow: false
    };
  },
  methods: {
    submitForm(addressForm) {
      this.$refs[addressForm].validate(valid => {
        if (valid) {
          if (this.defaultAddress) {
            this.addressForm.addressState = 1;
          }
          this.$http
            .post("/userAddress//user/addAddress", this.addressForm)
            .then(resp => {
              this.$refs[addressForm].resetFields();
              this.defaultAddress = false;
              alert(resp.data.message);
              this.listAllAddress();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(addressForm) {
      this.$refs[addressForm].resetFields();
    },
    submitUpdateForm(updateAddressForm) {
      this.$refs[updateAddressForm].validate(valid => {
        if (valid) {
          console.log(this.updateAddressForm);
          //修改操作
          this.$http
            .post("/userAddress/user/updateAddress", this.updateAddressForm)
            .then(resp => {
              alert(resp.data.message);
              this.showUpdateWindow = false;
              this.listAllAddress();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    delById(addressId) {
      this.$http
        .get("/userAddress/user/delAddress?addressId=" + addressId)
        .then(resp => {
          alert(resp.data.message);
          this.listAllAddress();
        });
    },
    resetUpdateForm(updateAddressForm) {
      this.$refs[updateAddressForm].resetFields();
    },
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listAllAddress() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/userAddress/user/selectAddressPage", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        })
        .then(resp => {
          console.log(resp.data.data);
          //将分页信息传入data区中
          this.page = resp.data.data;
        });
    },
    changeState(obj) {
      this.$http
        .get("/userAddress/user/changeAddressState", {
          params: {
            addressId: obj.addressId,
            addressState: 1
          }
        })
        .then(resp => {
          alert(resp.data.message);
          this.listAllAddress();
        });
    },
    handleClick(obj) {
      this.updateAddressForm = JSON.parse(JSON.stringify(obj));
      this.showUpdateWindow = true;
    }
  },
  created() {
    this.listAllAddress();
  }
};
</script>

<style scoped>
@import "../../../assets/login/css/style.css";
@import "../../../assets/bootstrap-3.3.4/dist/css/bootstrap.min.css";
@import "../../../assets/Flat-UI-master/dist/css/flat-ui.min.css";
</style>
